<template>
  <scroll-view scroll-y>
    <view class="my-page">
      <!-- 用户资料（头像&昵称） -->
      <view class="user-profile">
        <image class="user-avatar" v-if="userInfo?.avatar" :src="userInfo.avatar"></image>
        <image class="user-avatar" v-else src="/static/uploads/doctor-avatar.jpg"></image>
        <view class="user-info">
          <text class="nickname">{{ userInfo?.account }}</text>
          <text class="iconfont icon-edit"></text>
        </view>
      </view>
      <!-- 用户数据 -->
      <view class="user-data">
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo?.collectionNumber }}</text>
          <text class="data-label">收藏</text>
        </navigator>
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo?.likeNumber }}</text>
          <text class="data-label">关注</text>
        </navigator>
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo?.score }}</text>
          <text class="data-label">积分</text>
        </navigator>
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo?.couponNumber }}</text>
          <text class="data-label">优惠券</text>
        </navigator>
      </view>

      <!-- 药品订单 -->
      <custom-section>
        <template #right>
          <navigator hover-class="none" url="/subpkg_medicine/order_list/order_list">
            全部订单
          </navigator>
        </template>
        <template #default>
          <view class="drug-order">
            <navigator hover-class="none" url=" ">
              <uni-badge
                :text="userInfo?.orderInfo?.finishedNumber?.toString()"
                :offset="[3, 3]"
                absolute="rightTop"
              >
                <image src="/static/images/order-status-1.png" class="status-icon" />
              </uni-badge>
              <text class="status-label">已完成</text>
            </navigator>
            <navigator hover-class="none" url=" ">
              <uni-badge
                :text="userInfo?.orderInfo?.paidNumber?.toString()"
                :offset="[3, 3]"
                absolute="rightTop"
              >
                <image src="/static/images/order-status-2.png" class="status-icon" />
              </uni-badge>
              <text class="status-label">待付款</text>
            </navigator>
            <navigator hover-class="none" url=" ">
              <uni-badge
                :text="userInfo?.orderInfo?.receivedNumber?.toString()"
                :offset="[3, 3]"
                absolute="rightTop"
              >
                <image src="/static/images/order-status-3.png" class="status-icon" />
              </uni-badge>
              <text class="status-label">待发货</text>
            </navigator>
            <navigator hover-class="none" url=" ">
              <uni-badge
                :text="userInfo?.orderInfo?.shippedNumber?.toString()"
                :offset="[3, 3]"
                absolute="rightTop"
              >
                <image src="/static/images/order-status-4.png" class="status-icon" />
              </uni-badge>
              <text class="status-label">待收货</text>
            </navigator>
          </view>
        </template>
      </custom-section>
      <!-- 快捷工具 -->
      <custom-section title="快捷工具">
        <uni-list :border="false">
          <uni-list-item
            to="/subpkg_consult/order_list/order_list"
            :border="false"
            title="我的问诊"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-01',
            }"
          />
          <uni-list-item
            :border="false"
            title="我的处方"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-02',
            }"
          />
          <uni-list-item
            :border="false"
            to="/subpkg_archive/list/list"
            title="家庭档案"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-03',
            }"
          />
          <uni-list-item
            :border="false"
            title="地址管理"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-04',
            }"
          />
          <uni-list-item
            :border="false"
            title="我的评价"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-05',
            }"
          />
          <uni-list-item
            :border="false"
            title="官方客服"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-06',
            }"
          />
          <uni-list-item
            :border="false"
            title="设置"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-07',
            }"
          />
        </uni-list>
      </custom-section>
      <!-- 退出登录 -->
      <view class="logout-button" @click="onLogout">退出登录</view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
  @import './my.scss';
</style>

<script setup lang="ts">
  //  // npm run dev:h5
  import useUserStore from '@/stores/user'

  import { getUserInfoApi } from '@/api/user'
  import type { UserData } from '@/types/user'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  //

  const userInfo = ref<UserData>()
  const store = useUserStore()

  onLoad(async () => {
    const res = await getUserInfoApi()
    console.log('res  ----->  ', res)
    userInfo.value = res
  })

  const onLogout = async () => {
    const { confirm } = await uni.showModal({
      title: '温馨提示',
      content: '确定退出吗',
    })

    if (!confirm) return

    // 退出登录
    store.clearToken()
    // 删除token
    uni.reLaunch({ url: '/subpkg_login/login/login' })
  }
</script>
